<template>
	<view class="page">
		<lexiconNavVue title="设备测试" />
		<view class="top-hr" style="height: 0px;"></view>
		<view class="main" :style="{ height: scrollHeight + 'px'}">
			<!-- <view class="operate">
				<view class="rank-icon rank-icon-null">
					<image class="img" src="/static/image/game-icon3.png"></image>
				</view>
				<view class="rank-icon rank-icon-null">
					<image class="img" src="/static/image/game-icon2.png"></image>
				</view>
			</view> -->
			<view class="level_1">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
					<view class="" style="width: 100px;display: flex;flex-direction: column;">
						<titleBar :title="showInfo.zubieName" :titlefs="16" :remark="showInfo.zubieEnName"
							:remarkfs="8"></titleBar>
						<!-- remark 8px -->
					</view>
					<view class="" style="flex: 1;position: relative;">
						<!-- 倒计时进度条 -->
						<uv-line-progress :percentage="downtime_percentage" :showText="false"
							activeColor="#f73c69"></uv-line-progress>
						<view
							style="position: absolute;width: 100%;bottom: -30px;color: white;white-space: nowrap;font-size: 16px;font-family: hzgb;">
							测试模式｜Test Mode
						</view>
					</view>
					<view class="" style="width: 100px;display: flex;flex-direction: column;">
						<titleBar title="∞" :titlefs="20" remark="Times" :remarkfs="8"></titleBar>
					</view>
				</view>
			</view>
			<view class="test-content" :style="{ height: (scrollHeight - 240) + 'px'}">
				<text class="donghuaType" style="width: 100%; color: #ffffff00;">
					{{donghua}}
				</text>
				<view class="test-content-back">
					<view class="" v-if="testSteps == 1">
						<view class="btn-style">
							点击底部“开始”按钮
							<view class="title-en-common">Click the "Start" Button at the Bottom</view>
						</view>
						<view class="btn-style">
							进行设备测试
							<view class="title-en-common">Conduct Device Test</view>
						</view>
					</view>
					<view class="" v-else-if="testSteps == 2 || testSteps == 3">
						<image v-if="voiceIsPlayIng" style="width: 200px; height: 130px;" :src="showInfo.playImg"
							@click="voicePlayClicked" alt="" mode="aspectFit"></image>
						<image v-else style="width: 200px; height: 130px;" mode="aspectFit" :src="showInfo.unPlayImg"
							alt="" @click="voicePlayClicked"></image>
						<view class="tipsStr" v-if="testSteps == 2">
							{{voicePlayFinish ? showInfo.titlePlayStr : showInfo.titleStr}}
						</view>
						<view class="title-en-common white" v-if="testSteps == 2">{{voicePlayFinish ? showInfo.enTitlePlayStr : showInfo.enTitleStr}}</view>
						<view class="tipsStr" v-if="testSteps == 3">
							{{showInfo.titlePlayTwoStr}}
						</view>
						<view class="title-en-common white" v-if="testSteps == 3">{{showInfo.enTitlePlayTwoStr}}</view>
					</view>
					<view class="" v-else-if="testSteps == 4 || testSteps == 5">
						<image v-if="microphoneIng" style="width: 200px; height: 130px;" mode="aspectFit"
							:src="showInfo.playImg" @click="microphoneClicked" alt=""></image>
						<image v-else style="width: 200px; height: 130px;" mode="aspectFit" :src="showInfo.unPlayImg"
							alt="" @click="microphoneClicked"></image>
						<view class="tipsStr" v-if="testSteps == 4">
							{{microphoneIng ? showInfo.titlePlayStr : showInfo.titleStr}}
						</view>
						<view class="title-en-common white" v-if="testSteps == 4">{{microphoneIng ? showInfo.enTitlePlayStr : showInfo.enTitleStr}}</view>
						<view class="tipsStr" v-if="testSteps == 5">
							{{showInfo.titlePlayTwoStr}}
						</view>
						<view class="title-en-common white" v-if="testSteps == 5">{{showInfo.enTitlePlayTwoStr}}</view>
					</view>
					<view class="" v-else-if="testSteps == 6">
						<image style="width: 200px; height: 130px;" mode="aspectFit" :src="showInfo.playImg"
							@click="microphoneClicked" alt=""></image>
						<view class="tipsStr">
							{{showInfo.titleStr}}
						</view>
						<view class="title-en-common white">{{showInfo.enTitleStr}}</view>
						<view class="submit-menuback">
							<view class="submit-item" @click="nextClicked(7)"
								style="background-image: url(../../static/image/start.png); color: black;">
								是
								<view class="title-en-common">Yes</view>
							</view>
							<view class="submit-item" @click="unCompleteClick"
								style="background-image: url(../../static/image/ready.png); color: white;">
								否
								<view class="title-en-common">No</view>
							</view>
						</view>
					</view>
					<view class="" style="width: 100%;" v-else-if="testSteps == 7">
						<view class="word-str">
							monday
						</view>
						<view class='game-topic-box'>
							<view class='game-topic-input-box'>
								<view class='game-topic-input'>
									{{currentAnswer}}
									<view class="keyboard-cursor"></view>
								</view>
								<!-- 								<input :focus='focusState' class="place-input" @input="placeInputData">
								</input> -->
							</view>
						</view>
						<view class="tipsStr">
							{{showInfo.titlePlayStr}}
						</view>
						<view class="title-en-common white">Please enter the test word above</view>
					</view>
					<view class="mifeng" style="height: 200px;width: 240px; z-index: 99;">
						<mifeng v-if="canvasheight>0" ref="uniWordList1">
						</mifeng>
					</view>
				</view>
			</view>
			<view class="bottom-menuview">
				<view v-if="bottomSteps == 1" class="beginButton" @click="nextClicked(2)"
					style="background-image: url(../../static/image/start.png);">
					开始
					<view class="title-en-common">Start</view>
				</view>
				<view v-if="bottomSteps == 2">
					<view
						style="width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center;"
						v-if="voicePlayFinish">
						<view class="beginButton" @click="nextClicked(3)"
							style="background-image: url(../../static/image/start.png);">
							是
							<view class="title-en-common">Yes</view>
						</view>
						<view class="beginButton" @click="showPopView"
							style="background-image: url(../../static/image/ready.png); color: white;">
							否
							<view class="title-en-common">No</view>
						</view>
					</view>
					<view
						style="width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center;"
						v-else>
						<view class="beginButton" style="background-image: url(../../static/image/unStart.png);">
							是
							<view class="title-en-common">Yes</view>
						</view>
						<view class="beginButton" style="background-image: url(../../static/image/unStart.png);">
							否
							<view class="title-en-common">No</view>
						</view>
					</view>
				</view>
				<view v-if="bottomSteps == 3"
					style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<view class="answer-back">
						<view v-for="(item, index) in answerList"
							:class="`${selectAnswer == index ? 'item-activite' : ''} answer-item`" :key="index"
							:data-index="index" @click="itemClicked">
							{{item.answer}}
						</view>
					</view>
					<view class="sub-backview">
						<view class="sub-answer" @click="nextClicked(6)">
							确定
							<view class="title-en-common">Confirm</view>
						</view>
					</view>
				</view>
				<view v-if="bottomSteps == 4"
					style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<view class="beginButton" style="background-image: url(../../static/image/unStart.png);">
						确定
						<view class="title-en-common">Confirm</view>
					</view>
					<view class="bottom-str">
						当检测到麦克风已授权时按钮将会亮起
						<view class="title-en-common">The button will light up when microphone authorization is detected</view>
					</view>
				</view>
				<view v-if="bottomSteps == 5"
					style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
					<view class="beginButton" @click="nextClicked(6)"
						style="background-image: url(../../static/image/start.png);">
						确定
						<view class="title-en-common">Confirm</view>
					</view>
					<view class="bottom-str">
						当检测到麦克风已授权时按钮将会亮起
						<view class="title-en-common">The button will light up when microphone authorization is detected</view>
					</view>
				</view>
				<view
					style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;"
					v-if="bottomSteps == 6 || bottomSteps == 7">
					<view
						style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
						<keyboard @input="fnClickKeyboard" :currentKey="currentKey"></keyboard>
					</view>
					<view class="submit-button" @click="subwordClick"
						style="background-image: url(../../static/image/ready.png);">
						提交
						<view class="title-en-common">Submit</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<uv-overlay :show="finishShow==true">
			<view class=""
				style="height: 100%;width:100%; display: flex; flex-direction: column; align-items: center;justify-content: center;">
				<view class="warp"
					style="display: flex; flex-direction: column; align-items: center;justify-content: center;">
					<view class="rect" @tap.stop>
						完成
					</view>
					<view class="" @click="fnFinishGame()" style="background: linear-gradient(to top, #fff497, #ffd16b);
						width: 50%;
						padding: 8px 40px;
						border-radius: 23px;
						margin-top: 20px;
						font-family: hzgb;">
						确定
						<view class="btn-en">Confirm</view>
					</view>
				</view>
			</view>
		</uv-overlay>
		<popPromptBox v-if="showPopbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
		<popPromptBox v-if="showPermissionsbox" :msg="message" @confirm="openMicrophone" :showClose="true"
			@close="close"></popPromptBox>
		<keyboard-listener @keyup="onKeyup"></keyboard-listener>
	</view>
</template>

<script>
	import navbar from '../../components/gamesNav.vue'
	import mifeng from '../../components/games/mifeng.vue'
	import titleBar from '../../components/games/title-bar.vue'
	import keyboard from '../../components/games/keyboard.vue'
	import permission from '../../utils/permission.js'
	import keyboardListener from 'uniapp-keyboard-listener'
	export default {
		components: {
			navbar,
			mifeng,
			titleBar,
			keyboard,
			keyboardListener
		},
		data() {
			return {
				currentKey: '',
				donghua: 'donghua_daiji',
				finishShow: false, // 是否结束弹窗
				showPopbox: false,
				showPermissionsbox: false,
				voicePlayFinish: false, // 读音是否完成
				voiceIsPlayIng: false, //是否正在播放音频
				microphoneIng: false, // 是否点击了麦克风
				audioContext: null, //音频对象
				selectAnswer: null, // 单词选项
				currentAnswer: '', // 单词答案
				testSteps: 1,
				bottomSteps: 1,
				pininPlay: false,
				canvaswidth: 0,
				canvasheight: 200,
				showInfo: {
					zubieName: '设备测试',
					zubieEnName: 'Equipment test'
				},
				answerList: [{
						answer: 'peach',
					},
					{
						answer: 'apple',
					},
					{
						answer: 'orange',
					},
					{
						answer: 'banana',
					}
				],
				group_info: [{
						zubieName: '发音测试',
						zubieEnName: 'Radio sound test',
						titleStr: '*点击耳机，测试设备音频*',
						enTitleStr: 'Click Headphones to Test Device Audio',
						titlePlayStr: '*您的设备是否有声音*',
						enTitlePlayStr: 'Does your device have sound',
						titlePlayTwoStr: '*您听到的单词是*',
						enTitlePlayTwoStr: 'The word you heard is',
						playImg: require('../../static/image/pinyin_play.png'),
						unPlayImg: require('../../static/image/pinyin_unplay.png'),
						voiceUrl: 'https://cdn.spbcn.org/audio/lexicon/0/apple1.mp3'
					},
					{
						zubieName: '收音测试',
						zubieEnName: 'Radio sound test',
						titleStr: '*点击麦克，测试麦克风授权*',
						enTitleStr: ' Click Microphone to Test Microphone Authorization',
						titlePlayStr: '*麦克风已授权*',
						enTitlePlayStr: 'Microphone authorized',
						titlePlayTwoStr: '*已检测到您的麦克风正常*',
						enTitlePlayTwoStr: '',
						playImg: require('../../static/image/voice_play.png'),
						unPlayImg: require('../../static/image/voice_unplay.png'),
					},
					{
						zubieName: '输入测试',
						zubieEnName: 'Radio sound test',
						titleStr: '*设备上的键盘是否完整*',
						enTitleStr: 'Is the keyboard on your device complete?',
						titlePlayStr: '*请输入上方测试单词*',
						enTitlePlayStr: 'Please enter the test word above',
						playImg: require('../../static/image/jianpan.png'),
						unPlayImg: require('../../static/image/jianpan.png'),
					}
				],
				downtime_percentage: 0,
				scrollHeight: 0,
			}
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			}).exec();
			this.showInfo = this.group_info[0];
			setTimeout(() => {
				this.focusState = true;
			}, 500); // 延迟 500 毫秒后聚焦  
		},
		onLoad() {},
		mounted() {
			const that = this
			that.audioContext = uni.createInnerAudioContext();
			that.audioContext.src = '';
			// 监听音频开始播放事件
			that.audioContext.onPlay(() => {
				console.log('音频开始播放');
				that.voiceIsPlayIng = true;
				that.donghua = 'donghua_shuohua';
			});

			// 监听音频播放完毕事件
			that.audioContext.onEnded(() => {
				console.log('音频播放完毕');
				that.voiceIsPlayIng = false;
				that.voicePlayFinish = true;
				that.donghua = 'donghua_daiji';
			});
		},
		methods: {
			close() {
				this.showPermissionsbox = false;
			},
			showPopView() {
				this.message = '请检查您的设备是否开启音量，或是否处于静音状态！';
				this.showPopbox = true;
			},
			hidePromptbox() {
				this.showPopbox = false;
			},
			// 开始设备测试
			nextClicked(Steps) {
				if (Steps == 4) {
					if (this.selectAnswer == 1) {
						this.showInfo = this.group_info[1];
					} else {
						this.message = '请选出您听到的音频答案';
						this.showPopbox = true;
						return;
					}
				}
				if (Steps == 6) {
					this.showInfo = this.group_info[2];
				}
				this.testSteps = Steps;
				this.bottomSteps = Steps;
			},
			// 音频点击
			voicePlayClicked() {
				if (this.audioContext) {
					this.audioContext.src = this.showInfo.voiceUrl;
					this.audioContext.play();
				}
			},

			// 音频答案点击
			itemClicked(value) {
				console.log('value', value);
				this.selectAnswer = value.currentTarget.dataset.index;
			},
			// 麦克风点击
			microphoneClicked() {
				var _this = this;
				const platform = uni.getSystemInfoSync().platform;
				console.log('platform', platform);
				var avaudiosession = plus.ios.import("AVAudioSession");
				var avaudio = avaudiosession.sharedInstance();
				if (platform === 'ios') {
					if (permission.judgeIosPermission('record')) {
						_this.bottomSteps = 5;
						_this.microphoneIng = true;
					} else {
						// _this.showPermissionsbox = true;
						// _this.message = '检测到您的设备未授权麦克风权限，是否去授权开启？'
						avaudio.requestRecordPermission(() => {
							console.log('申请麦克风权限');
							_this.bottomSteps = 5;
							_this.microphoneIng = true;
						});
					}
					plus.ios.deleteObject(avaudiosession);
				} else if (platform === 'android') {
					permission.requestAndroidPermission("android.permission.RECORD_AUDIO").then((e) => {
						if (e === -1 || e === 0) {
							_this.showPermissionsbox = true;
							_this.message = '检测到您的设备未授权麦克风权限，是否去授权开启？'
						} else if (e === 1) {
							_this.bottomSteps = 5;
							_this.microphoneIng = true;
						} else {
							uni.showToast({
								title: "授权返回值错误",
								icon: "none"
							})
						}
					})
				}
			},
			openMicrophone() {
				permission.gotoAppPermissionSetting();
			},
			// 全局监听外接键盘点击事件
			onKeyup(value) {
				var data = {
					target: value.key
				}
				var _this = this;
				this.currentKey = value.key;
				this.fnClickKeyboard(data);
				setTimeout(() => {
					_this.currentKey = "";
				}, 300);
			},
			// 点击软键盘
			fnClickKeyboard(data) {
				if (this.testSteps == 6) {
					return;
				}
				var currentKeyStr = data.target;
				if (currentKeyStr != 'del' && this.$util.isContains(currentKeyStr)) {
					this.currentAnswer += currentKeyStr;
					console.log('this.currentAnswer', this.currentAnswer)
				}
			},
			// 提交单词内容
			subwordClick() {
				if (this.testSteps == 6) {
					return;
				}
				if (this.currentAnswer == 'monday') {
					this.finishShow = true;
				} else {
					this.message = '请输入和上方一致的单词';
					this.currentAnswer = "";
					this.showPopbox = true;
				}
			},
			// 键盘不完整
			unCompleteClick() {
				this.message = '若键盘显示不完整请截图联系客服人员，并更换成手机设备，感谢您的反馈';
				this.showPopbox = true;
			},
			// 测试结束
			fnFinishGame() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="less">
	.page {
		background: radial-gradient(circle, #373632, #000);
		width: 100%;
		height: 100vh;
		text-align: center;
	}

	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: url(../../static/image/homePage/diwen.png);
		background-size: 100% auto;
		background-position: top left;
		background-repeat: repeat-y;
		box-sizing: border-box;

		.level_1 {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100px;
			width: 100%;
			overflow: hidden;
			background: linear-gradient(to bottom, #1c170d, #373632);
		}

		.operate {
			position: absolute;
			top: 190px;
			right: 12px;
			width: 30px;

			.rank-icon {
				width: 30px;
				height: 30px;
				border-radius: 4px;
				background: linear-gradient(to top, #fff497, #ffd16b);
				box-shadow: 0 4px 0 0 #d9b059;
				margin-bottom: 12px;

				.img {
					width: 30px;
					height: 30px;
				}
			}

			.rank-icon-null {
				background: linear-gradient(to top, #cfcfcf, #a1a1a1);
				box-shadow: 0 4px 0 0 #969696;
			}
		}

		.test-content {
			width: 100vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.test-content-back {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				bottom: 0;

				.mifeng {
					z-index: 99;
				}
			}

			.btn-style {
				height: 50px;
				font-size: 22px;
				// line-height: 40px;
				padding: 8px 20px 0;
				// width: 252px;
				margin: 20px auto;
				background: linear-gradient(to top, #fff497, #ffd16b);
				border-radius: 25px;
				letter-spacing: 2px;
				color: black;
				font-family: hzgb;
				.title-en-common{
					letter-spacing: 0;
				}
			}

			.level_2 {
				flex: 1;
				// color: white;
				// background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));
				// background-image: url(/static/image/app/test_end_new.png);
				// background-size: 100% 100%;
				// background-position: bottom center;
				// background-repeat: no-repeat;
			}
		}

		.bottom-menuview {
			width: 100vw;
			height: 240px;
			box-sizing: border-box;
			z-index: 100;
			position: relative;
			flex-wrap: wrap;
			background: linear-gradient(to bottom, rgba(19, 14, 0, 0.8), rgba(200, 200, 200, 0.1));
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.answer-back {
				width: 100%;
				height: 130px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;

				.answer-item {
					width: 40%;
					height: 45px;
					background: var(--themeBlackTopBack);
					line-height: 50px;
					border-radius: 5px;
					margin: 10px 10px;
					text-align: center;
					color: white;
					font-size: 18px;
					font-weight: 900;
					box-shadow: 0px 8px 0px 0px #151104;
				}

				.item-activite {
					height: 50px;
					background: var(--themeButtonTopBack) !important;
					box-shadow: 0px 0px 0px 0px #feef7e !important;
				}
			}

			.beginButton {
				width: 120px;
				height: 137px;
				margin: auto 20px;
				// line-height: 137px;
				text-align: center;
				font-family: 'hzgb';
				color: #000;
				font-size: 26px;
				background-size: 100% 100%;
				background-position: bottom center;
				background-repeat: no-repeat;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center
			}
		}

		.tipsStr {
			width: 100%;
			margin-top: 10px;
			font-size: 20px;
			color: white;
			font-family: 'hzgb';
			text-align: center;
		}

		.sub-backview {
			width: 70%;
			height: 55px;
			margin-top: 10px;
			border-radius: 30px;
			background: var(--themeButtonBottomBack);
			box-sizing: border-box;
			padding: 5px;

			.sub-answer {
				width: 100%;
				height: 45px;
				text-align: center;
				// line-height: 45px;
				padding-top: 6px;
				font-size: 20px;
				font-family: 'hzgb';
				color: black;
				border-radius: 20px;
				background: var(--themeButtonTopBack);
			}
		}

		.bottom-str {
			width: 100%;
			margin-top: 15px;
			color: white;
			font-family: 'hzgb';
			font-size: 16px;
			text-align: center;
			letter-spacing: 2px;
		}

		.submit-button {
			width: 80px;
			height: 91px;
			// line-height: 91px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			font-family: 'hzgb';
			color: #fff;
			font-weight: 900;
			font-size: 20px;
			background-size: 100% 100%;
			background-position: bottom center;
			background-repeat: no-repeat;
			position: absolute;
			top: -45px;
		}

		.submit-menuback {
			width: 100vw;
			padding: 0px 50px;
			z-index: 100;
			/* margin-left: 5%; */
			margin-bottom: -110px;
			margin-top: 20px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.submit-item {
				width: 80px;
				height: 91px;
				z-index: 100;
				// line-height: 91px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				font-family: 'hzgb';
				font-weight: 900;
				font-size: 20px;
				background-size: 100% 100%;
				background-position: bottom center;
				background-repeat: no-repeat;
			}
		}

		.word-str {
			font-size: 50px;
			color: white;
			font-weight: 800;
			letter-spacing: 3px;
			text-align: center;
		}


		.game-topic-input {
			height: 80rpx;
			border-radius: 40rpx;
			width: 100%;
			background: #fff3c6;
			font-size: 24px;
			letter-spacing: 3px;
			font-weight: 800;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.keyboard-cursor {
			width: 2px;
			height: 22.5px;
			background-color: #5382C6;
			border-radius: 1px;
			animation: blinking 1s ease-in-out infinite;
		}

		@keyframes blinking {

			0%,
			100% {
				opacity: 0;
			}

			50% {
				opacity: 1;
			}
		}

	}

	.rect {
		width: 300px;
		height: 300px;
		background-image: url(../../static/image/done.png);
		background-size: cover;
		background-position: center;
		font-family: hzgb;
		color: #ffd571;
		text-align: center;
		padding-top: 104px;
		font-size: 36px;
	}
	.white{
		color: #fff;
	}
	.title-en-common{
		letter-spacing: 0;
	}
</style>